<template>
  <van-list
    :loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    :offset="20"
    @load="onLoad"
    class="list"
  >
    <div class="list-box">
      <ul class="left-box">
        <li class="goods-box" v-for="item in oddList" :key="item.proid">
          <img class="img" :src="item.img1" />
          <p class="van-multi-ellipsis--l2 pname">{{ item.proname }}</p>
          <p>¥{{ item.originprice }}</p>
        </li>
      </ul>
      <ul class="right-box">
        <li class="goods-box" v-for="item in evenList" :key="item.proid">
          <img class="img" :src="item.img1" />
          <p class="van-multi-ellipsis--l2 pname">{{ item.proname }}</p>
          <p>¥{{ item.originprice }}</p>
        </li>
      </ul>
    </div>
  </van-list>
</template>

<script>
export default {
  data() {
    return {
      loading: false, //当前是否在发送请求。
      finished: false, //所有数据请求完毕
      goodslist: [],
      count: 1, //页数
      limitNum: 10, //每页多少商品
    };
  },
  computed: {
    // （左侧列）奇数列的数据
    oddList() {
      return this.goodslist.filter((item, index) => index % 2 == 0);
    },
    // （右侧列）偶数列的数据
    evenList() {
      return this.goodslist.filter((item, index) => index % 2 == 1);
    },
  },
  created() {
    this.getImgs();
  },
  methods: {
    onLoad() {
      if (this.loading || this.finished) {
        return;
      }
      this.count++;
      this.getImgs();
    },
    // 封装数据请求 -- 商品列表
    getImgs() {
      this.loading = true;
      this.$http
        .get("/pro/list", {
          params: {
            count: this.count,
            limitNum: this.limitNum,
          },
        })
        .then((res) => {
          if (res.data.code === "200") {
            if (res.data.data.length == 0) {
              //后端没有数据了
              this.finished = true;
              return;
            }
          }
          this.goodslist.push(...res.data.data);
          //此处改变了数据，但是，不能保证渲染完毕（不能保证dom已经渲染到页面上，而vue框架渲染dom是异步更新队列（即：数据改变后，并不会理解渲染dom））
          // this.$nextTick(callback); 当数据修改后，想在数据影响的dom渲染后，做事情，就需要使用this.$nextTick() ，把想做的事情以回调函数的方式传给$nextTick;
          this.$nextTick(() => {
            this.loading = false;
          });
        });
    },
  },
};
</script>

<style scoped>
.list{
  /* margin-bottom: 50px; */
}
.list-box {
  display: flex;
  justify-content: space-around;
}

.left-box,
.right-box {
  width: 45%;
}

.left-box .img,
.right-box .img {
  width: 100%;
}

.goods-box {
  border: 1px solid #b6b6b6;
  border-radius: 0.625rem;
  margin-top: 20px;
}

.pname {
  font-size: 14px;
  line-height: 20px;
}
</style>